<template>
  <button @click="btnClick">减-countobj:{{ countobj.num }}</button>
  <!-- 在模板中ref对象会自动解析value是浅层解包 -->
  <button @click="btnClickA">加-count:{{ count }}</button>
  <div>{{ info.count }}</div>
</template>

<script>
import { ref, reactive } from 'vue'
export default {
  setup(props, { emit, slots, attrs }) {
    // reactive方法传入的必须是对象或者数组类型
    const countobj = reactive({
      num: 100,
    })
    const btnClick = () => (countobj.num -= 1)

    // ref通过value进行维护
    const count = ref(0)
    const info = ref({
      count,
    })
    const btnClickA = () => (count.value += 1)
    return {
      countobj,
      btnClick,
      count,
      btnClickA,
      info,
    }
  },
}
</script>
<style scoped></style>
